<template>
	<div class="system-holiday-container">
		<el-calendar ref="holidayRef" v-model="select">
			<template #header="{ date }">
				<span>{{ date }}</span>
				<div class="holiday-button">
					<el-date-picker class="mr10" v-model="select" @change="onSelectChange" type="month" size="small" style="width: 100px;"/>
					<el-button-group>
						<el-button size="small" @click="onSelectDate('prev-year')">上一年</el-button>
						<el-button size="small" @click="onSelectDate('prev-month')">上个月</el-button>
						<el-button size="small" @click="onSelectDate('today')">今天</el-button>
						<el-button size="small" @click="onSelectDate('next-month')">下个月</el-button>
						<el-button size="small" @click="onSelectDate('next-year')">下一年</el-button>
					</el-button-group>
				</div>
			</template>
			<template #date-cell="{ data }">
				<el-tooltip effect="light" placement="bottom" :disabled="!getHolidayInfo(data.day)?.remark">
					<template #content>
						<div>{{ getHolidayInfo(data.day)?.remark }}</div>
					</template>
					<div class="date-cell" 
						:class="getHolidayInfo(data.day).workDay ? '' : 'is-vacation'" 
						@click.stop="onSelectDate(data.type)"
						@dblclick="onOpenEditHoliday(data)">
						<el-badge v-if="getHolidayInfo(data.day).holidayType == 3" value="班" class="item" type="primary"></el-badge>
						<el-badge v-else-if="getHolidayInfo(data.day).holidayType == 2 || getHolidayInfo(data.day)?.weekend" value="休" class="item" type="success"></el-badge>
						<div class="date-cell-day">{{ Number(data.day.split('-')[2]) }}</div>
						<div class="date-cell-mark">{{ getHolidayInfo(data.day)?.name }}</div>
					</div>
				</el-tooltip>
			</template>
		</el-calendar>
		<div class="tips color-info mt10 pl20 w100">温馨提示：双击单元格设置日期属性信息。</div>
		
		<el-dialog title="日期设置" v-model="isShowDialog" width="450">
			<el-form ref="setHolidayFormRef" :model="formData" label-width="100">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="当前日期" prop="date">
							<el-input type="text" v-model="formData.date" :readonly="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="工 作 日" prop="workDay">
							<el-switch v-model="formData.workDay" 
							active-text="是" inactive-text="否" 
							:active-value="true" :inactive-value="false"
							inline-prompt style="--el-switch-off-color: var(--el-color-success);"/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="日期类型" prop="holidayType">
							<el-radio-group v-model="formData.holidayType" @change="onHolidayTypeChange">
								<el-radio :label="1">平常日</el-radio>
								<el-radio :label="2">节假日</el-radio>
								<el-radio :label="3">补班日</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="节日名称" prop="name">
							<el-input type="text" v-model="formData.name" placeholder="请输入节日名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="日期备注" prop="remark">
							<el-input type="textarea" v-model="formData.remark" placeholder="请输入日期备注" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getHolidayList, setHoliday } from '/@/api/system/holiday/index';

export default {
	name: 'holiday',
	components: { },
	setup() {
		const holidayRef = ref();
		const setHolidayFormRef = ref();
		const state = reactive({
			isShowDialog: false,
			formData: {
				date : '',
				name: '',
				remark: '',
				workDay: true,
				weekend: false,
				holidayType: 1, // 1-平常日，2-节假日，3-调休补班日
			},
			today: new Date(),
			select: new Date(),
			holidays: [],
		});
		
		const loadTableData = (params?: any) => {
			getHolidayList(params).then((res: any) => {
				if(res.code === 0){
					state.holidays = res.data;
				}
			})
		}
		
		const getHolidayInfo = (day: string) => {
			const filters = state.holidays.filter((holiday: any) => holiday.date === day);
			if(filters && filters.length > 0){
				return filters[0];
			}
			return {
				name: '',
				date: day,
				remark: '',
				workDay: true,
				weekend: false,
				holidayType: 1,
			};
		}
		
		const onSelectDate = (val: string) => {
			if(val !== 'current-month'){
				holidayRef.value.selectDate(val);
				loadTableData({year: state.select.getFullYear(), month: state.select.getMonth() + 1});
			}
		}
		
		const onSelectChange = (select: Date) => {
			loadTableData({year: select.getFullYear(), month: select.getMonth() + 1});
		}
		
		const onHolidayTypeChange = (val: number) => {
			if(val == 2){
				state.formData.workDay = false;
			}
		}
		
		const onOpenEditHoliday = (data: any) => {
			state.isShowDialog = true;
			const holiday = getHolidayInfo(data.day);
			state.formData = holiday;
		}
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			setHolidayFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			setHolidayFormRef.value.validate(valid => {
				if(valid){
					let params = {
						date: state.formData.date,
						workDay: state.formData.workDay ? true : false,
						holidayType: state.formData.holidayType,
						name: state.formData.name,
						remark: state.formData.remark,
					}
					setHoliday(params).then((res: any) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							loadTableData({year: state.select.getFullYear(), month: state.select.getMonth() + 1});
							closeDialog();
						}
					});
				}
			});
		};
		// 页面加载时
		onMounted(() => {
			loadTableData({year: state.select.getFullYear(), month: state.select.getMonth() + 1});
		});
		return {
			holidayRef,
			setHolidayFormRef,
			onSelectDate,
			onSelectChange,
			onOpenEditHoliday,
			onHolidayTypeChange,
			onCancel,
			onSubmit,
			getHolidayInfo,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
.system-holiday-container {
	.date-cell {
		height: 100%;
		width: 100%;
		padding: 8px;
		&-btn {
			text-align: left;
		}
		&-day {
			text-align: center;
			line-height: 24px
		}
		&-mark {
			text-align: center;
			overflow: hidden; 
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.is-vacation {
		background-color: var(--el-color-danger-light-9);
		color: var(--el-color-danger);
	}
	:deep .el-calendar-table .el-calendar-day {
		padding: 0 !important;
	}
}
</style>